<template>
  <div>
    <!-- 添加一个行来容纳侧边栏和主内容 -->
    <el-row>
      <!-- 侧边栏 -->
      <el-col :span="6">
        <!-- 侧边栏内容，您可以在这里添加导航或其他信息 -->
        <div >

          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" unique-opened router >
            <el-submenu index="1">
              <template slot="title" >
                <i class="el-icon-location"></i>
                <span>长期未出现人员</span>
                <span class="male-count" >({{ maleCount }})
                <button @click="handle">查询</button>
                </span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/community/plot">重点人员</el-menu-item>
                <el-menu-item index="/community/building">关注人员</el-menu-item>
                <el-menu-item index="/community/building">普通人员</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-col>
      <!-- 主内容 -->
      <el-col :span="18">
        <!-- 您现有的表单和列表代码放在这里 -->
        <el-form ref="form" :model="population" label-width="80px" style="padding-top: 50px">
          <el-form-item>
            姓名：<el-input v-model="population.name" style="width: 300px;padding-right: 50px" placeholder="请输入姓名" ></el-input>
            证件号码：<el-input v-model="population.idNumber" style="width: 300px;padding-right: 50px" placeholder="请输入证件号码" ></el-input>
            手机号：<el-input v-model="population.phone" style="width: 300px" placeholder="请数据手机号"></el-input>
          </el-form-item>
          <el-form-item>
            类型：<el-select v-model="population.type" style="padding-right: 50px" placeholder="请选择类型">
            <el-option v-for="item in dict.type.sys_popu_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
            性别：<el-select v-model="population.sex" style="padding-right: 50px" placeholder="请选择性别" clearable>
            <el-option v-for="item in dict.type.sys_popu_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
            迁移状态：<el-select v-model="population.transfer" style="padding-right: 50px" placeholder="请选择迁移状态">
            <el-option v-for="item in dict.type.sys_popu_transfer" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="warning" plain icon="el-icon-upload2" size="medium" @click="exportExcel" style="float: right;margin-right: 20px" >导出</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

        <div>
          <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
          <div v-for="item in arr" style="float: left; margin-left: 100px; display: flex;">
            <el-card style="max-width: 480px; display: flex;">
              <div style="flex: 1; display: flex;">
                <!-- 图片显示在左边 -->
                <img :src="item.pic" alt="" style="width: 100px; height: 100px; margin-right: 20px;">
                <!-- 数据显示在右边 -->
                <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <!-- 姓名独占一行，加粗加大 -->
                  <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
                    <p class="text item">{{ item.name }}</p>
                  </div>
                  <!-- 剩余字段两个两个排列 -->
                  <div style="width: 50%;">
                    <p class="text item">性别: {{ item.sex === 1 ? '男' : '女' }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">电话: {{ item.phone }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">类型: {{ item.type }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">小区名称: {{ item.plotName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">楼栋名称: {{ item.buildingName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">单元名称: {{ item.apartmentName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">房间名称: {{ item.roomName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">身份证号码: {{ item.idNumber }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">民族: {{ item.nationName }}</p>
                  </div>
                  <!-- 如果需要显示更多信息，可以继续添加 -->
                </div>
              </div>
              <template #footer>Footer content</template>
            </el-card>
          </div>
        </div>
        <el-table :data="arr" style="width: 100% ;padding-top: 20px">
          <el-table-column label="图片" width="250">
            <template slot-scope="scope">
              <img :src="scope.row.pic" alt="图片损坏">
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-if="scope.row.sex==0">男</span>
              <span style="margin-left: 10px" v-if="scope.row.sex==1">女</span>
            </template>
          </el-table-column>
          <el-table-column label="最后出现" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.lastTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="民族" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.nationName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{scope.row.phone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="小区" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.plotName }}{{scope.row.buildingName}}{{scope.row.apartmentName}}{{scope.row.roomName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="证件号码" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.idNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="户籍地址" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.domicileAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- ... -->
      </el-col>
    </el-row>
    <!-- ... -->



    <el-dialog :title="this.bb" :visible.sync="dialogFormVisible">
      <el-form :model="populations">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="populations.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" :label-width="formLabelWidth">
          <el-input v-model="populations.idNumber" autocomplete="off" @blur="blur" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="populations.sex" placeholder="请选择性别">
            <el-option v-for="item in dict.type.sys_popu_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-select v-model="populations.nationId" placeholder="请选择民族">
            <el-option v-for="item in nation" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="populations.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="小区" :label-width="formLabelWidth">
          <el-select v-model="populations.plotId" placeholder="请选择小区" @change="handleChange" >
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体住址" :label-width="formLabelWidth">
          <el-select v-model="populations.building" placeholder="请选择楼栋" @change="handleChangeBuild">
            <el-option v-for="item in building" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="populations.apartment" placeholder="请选择单元" @change="handleChangeCell"  >
            <el-option v-for="item in apartment"
                       :label="item.name"
                       :value="item.id"
                       :key="item.id" ></el-option>
          </el-select>
          <el-select v-model="populations.tenementId" placeholder="请选择房间号"  >
            <el-option v-for="item in room" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户籍地址" :label-width="formLabelWidth">
          <el-input v-model="populations.domicileAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker v-model="populations.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="人脸图片" :label-width="formLabelWidth">
          <el-upload
            action="/prod-api/base-sixreal/population/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <img :src="populations.pic" alt="">
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPopulation">确 定</el-button>
      </div>
    </el-dialog>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.population.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.population.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.population.total">
    </el-pagination>

  </div>
</template>

<script>
import { list, nationList, plotList , add, update, del } from "@/api/community/population";
import { findById, findByPlotId } from "@/api/community/tenement";
import {findcount, findlastTime} from "../../api/IC/gen";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
  dicts: ['sys_popu_sex','sys_popu_type','sys_popu_transfer'],
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      activeIndex: '1',
      maleCount: 0,
      arr:[],
      population:{
        pageNum:1,
        pageSize:3,
        total:1
      },
      aa:0,
      dialogFormVisible:false,
      formLabelWidth: '120px',
      populations:{},
      bb:"新增人口",
      plot:[],
      nation:[],
      building:[],
      apartment:[],
      room:[],
      cc:1,
      popu:{},
      dialogImageUrl: '',
      dialogVisible: false,
      queryid:0
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    handle() {
      // 判断是否点击了 "长期未出现人员"

        // 执行你的逻辑
       findlastTime(this.population).then(res => {
          this.arr = res.data;
        });

    },
    init()
    {
      findcount().then(res=>{

        this.maleCount = res.data
      })
    },
    blur(){
      if (this.populations.idNumber && this.populations.idNumber.length === 18) {
        alert(this.populations.sex)
      } else {
        alert("证件号格式错误")
        this.populations.sex = '';
        this.populations.birthday = '';
      }
    },
    handleSuccess(response,file,fileList){
      this.populations.pic=response.data
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/base-sixreal/population/importExcel', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(() => {
        alert('导入成功！');
        // 可以在这里刷新页面或做其他操作
      }).catch(error => {
        console.error('导入失败：', error);
        alert('导入失败！');
      });
    },
    exportExcel() {
      this.download('/base-sixreal/population/export',{
        ...this.queryParams
      }, `spu_${new Date().getTime()}.xlsx`)
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit(){
      this.list()
    },
    handleDelete(populations){
      del(populations.id).then(
        res => {
          this.$message.success(res.msg)
          this.list()
        }
      )
    },
    handleEdit(populations){
      this.bb="修改人口信息"
      this.populations=populations
      this.dialogFormVisible=true
      this.cc=2
      this.handleChange()
      this.handleChangeBuild()
      this.handleChangeCell()
      console.log(populations)
    },
    addPopulation(){
      if(this.cc=1){
        add(this.populations).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.list()
          }
        )
      }
      if(this.cc=2){
        update(this.populations).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.list()
          }
        )
      }
    },
    plotList(){
      plotList().then(
        res => {
          this.plot=res.data
        }
      )
    },
    handleChange(){
      findByPlotId(this.populations.plotId).then(
        res => {
          this.building=res.data
        },
      )
    },
    handleChangeBuild(){
      findById(this.populations.building).then(
        res => {
          this.apartment=res.data
        }
      )
    },
    handleChangeCell(){
      findById(this.populations.apartment).then(
        res => {
          this.room=res.data
        }
      )
    },
/*    add(){
      this.populations={}
      this.dialogFormVisible=true
    },*/
    handleSizeChange(val) {
      this.population.pageSize=val
      this.list()
    },
    handleCurrentChange(val) {
      this.population.pageNum=val
      this.list()
    },
    list(){
      list(this.population).then(
        res => {
          this.population.total=res.data.total
          this.arr=res.data.list
        }
      )
    },
    nationList(){
      nationList().then(
        res => {
          this.nation=res.data
        }
      )
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {

    this.list()
    this.nationList()
    this.plotList()
    this.init()

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.list()
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>


